<template>
    <div>
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    {{ id }}
                    <el-descriptions title="项目信息">
                        <el-descriptions-item label="项目名称">{{ info.title }}</el-descriptions-item>
                        <el-descriptions-item label="项目所在县（市）区">{{ info.address }}</el-descriptions-item>
                        <el-descriptions-item label="建设规模">{{ info.size }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ info.phone }}</el-descriptions-item>
                        <el-descriptions-item label="耕地占用税（是否缴纳）">{{ info.gdzyf }}</el-descriptions-item>
                        <el-descriptions-item label="土地使用税（是否缴纳）">{{ info.tdsys }}</el-descriptions-item>
                        <el-descriptions-item label="城市维护建设税（适用税率）">{{ info.cswhjss }}</el-descriptions-item>
                        <el-descriptions-item label="土地增值税项目编号">{{ info.cswhjss }}</el-descriptions-item>
                        <el-descriptions-item label="时间范围">{{ info.start_at }}至{{ info.end_at }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions title="人员信息">
                        <el-descriptions-item v-for="user in userList" label="姓名">{{ user.user_info.username }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="项目进度" name="second">项目进度</el-tab-pane>
                <el-tab-pane label="证件信息" name="third">
                    <credentials :project_id="id"></credentials>
                </el-tab-pane>
                <el-tab-pane label="项目文件" name="fourth">项目文件</el-tab-pane>
                <el-tab-pane label="绩效提成" name="fourth1">绩效提成</el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
import credentials from './detail/credentials.vue'
import projectApi from '@/api/project'

export default {
    components: {
        credentials,
    },
    data() {
        return {
            activeName: 'first',
            id: '',
            info: {},
            userList: {},
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getProjectInfo() {
            projectApi.getProjectInfo(this.id).then(response => {
                this.info = response.data.info;
            })
        },
        getProjectUserInfo() {
            projectApi.getProjectUserInfo(this.id).then(response => {
                console.log(response.data.list);
                this.userList = response.data.list;
            })
        },
    },
    created() {
        var query = this.$route.query;
        console.log(query);
        if (query.id) {
            this.id = query.id;
        }
        this.getProjectInfo();
        this.getProjectUserInfo();
    },
};
</script>
  
<style></style>